<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui" > <!-- Agregar xmlns:p y xmlns:f para poder 
                                                     utilizar etiquetas especiales
                                                     de los frameworks -->

    <f:view contentType="text/html"> <!-- Agregar esta linea y cerrarla despues de body -->
        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <link href="resources/css/default.css" rel="stylesheet" type="text/css" />
            <link href="resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
            <link href="resources/css/style.css" rel="stylesheet" type="text/css" />
            <title>.: Academik :.</title>
        </h:head>

        <h:body>
            <h:form id="frmPrincipal" prependId="false">
                <div id="top">
                    <h:graphicImage height="45" value="#{resource['images:logo.png']}"/>
                </div>

                <div id="content" class="center_content">
                    <ui:insert name="content">Content</ui:insert>
                </div>

                <style type="text/css" >
                   #uxp_ftr_control {
                       clear: both;
                       border-top: 1px solid #CCC;
                       width: 100%;
                       font-size: 86%;
                       color: black;
                       background-color: white;
                   }

                   .contenidoPie{
                       border-collapse: separate;
                       border-spacing: 2px;
                   }

                   #idUl{
                       margin: 0;
                       padding: 0;
                       list-style: none;
                       padding-left: 10px;
                   }

                   .ulLi{
                       float: left;
                       padding: 5px 10px;
                       white-space: nowrap;
                       color: #666;
                       font-family: "Calibri";
                       font-size: 14px;
                   }

                   .pie{
                       white-space: nowrap;
                       color: #666;
                       font-family: "Calibri";
                       font-size: 14px;
                   }

                   .celdas {
                       display: table-cell;
                       vertical-align: inherit;
                   }

                   #fila{
                       display: table-row;
                       vertical-align: inherit;
                       border-color: inherit;
                   }
                </style>

                <div id="bottom" >
                    <table id="uxp_ftr_control" class="conenidoPie" cellpadding="0" cellspacing="0" >
                        <tr class="celdas" id="fila" >
                            <td class="celdas" >
                                <ul id="idUl" >
                                    <li class="ulLi" ><span class="pie" >© 2012 Academik</span></li>
                                    <li class="ulLi"><span class="pie" >[Nombre Institución]</span></li>
                                    <li class="ulLi"><span class="pie" >Java Server Faces</span></li>
                                </ul>
                            </td>
                        </tr>
                    </table> 
                </div>
            </h:form>
        </h:body>
    </f:view>
</html>
